<template>
  <div>
   <!--用户，乐谱，乐谱集统计-->
    <div>
      <h3 style="margin-top: 30px;text-align: center;margin-bottom: 20px">用户，乐谱，乐谱集统计</h3>
      <div  id="myChart" :style="myChartStyle"></div>
    </div>
    <!--注册用户性别比例-->
    <el-row style="float:left;width: 500px">
      <el-col :span="20">
        <h3 style="margin-top: 30px;text-align: center;margin-bottom: 20px">注册用户性别比例</h3>
        <div>
          <ve-pie :data="consumerSex"></ve-pie>
        </div>
      </el-col>
    </el-row>
    <!--不同风格乐谱总数比例-->
    <div style="float:right;width: 500px">
      <h3 style="margin-top: 30px;margin-bottom: 20px;margin-left: 175px">不同风格乐谱总数比例</h3>
      <div id="main" :style="{width:'500px',height:'400px'}"></div>
    </div>
  </div>
</template>

<script>

import {getAllConsumers, getAllCounts, getStyle1Staff} from "@/api";
import * as echarts from "echarts";



export default {
  name: "InFor",
  data() {
    return {
      xData: ["注册用户数", "总乐谱数", "总乐谱集数"], //横坐标
      yData: [], //数据
      myChartStyle: {float: "left", width: "100%", height: "400px"}, //图表样式
      consumer: [],//所有用户
      consumerSex: {
        columns: ['性别', '总数'],
        rows: [
          {'性别': '男', '总数': 0},
          {'性别': '女', '总数': 0},
        ]
      }
    }
  },
  mounted() {
    this.getAllConsumer();
    this.getAllCount();
    this.initEcharts();
    this.bzt()
  },
  methods: {
    bzt() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(document.getElementById('main'));
      //数据加载完之前先显示一段简单的loading动画
      myChart.showLoading();
      const values = [];
      //数据加载完之前先显示一段简单的loading动画
      myChart.showLoading();
      getStyle1Staff().then(res => {
        if (res.code === 200) {
          for (let [key, value] of Object.entries(res.data)) {
            values.push({name: key, value: value})
          }
          myChart.hideLoading(); //隐藏加载动画
          myChart.setOption(
            {
              legend: {
                center: 'left',
                data: values
              },
              series: [
                {
                  name: '华语',
                  type: 'pie',
                  radius: '60%',
                  center: ['50%', '50%'],
                  data: values,
                },
              ]
            }
          );
        }
      });
    },

    //获取用户总数
    getAllConsumer() {
      getAllConsumers().then(res => {
        this.consumer = res.data;
        this.consumerSex.rows[0]['总数'] = this.setSex(1, this.consumer);
        this.consumerSex.rows[1]['总数'] = this.setSex(0, this.consumer);
      })
    },
    //区分性别
    setSex(sex, consumer) {
      let count = 0;
      for (let item of consumer) {
        if (sex === item.sex) {
          count++;
        }
      }
      return count;
    },
    //获取用户、乐谱集、乐谱总数
    getAllCount() {
      getAllCounts().then(res => {
        this.initEcharts(res)
      })
    },
    //柱状图
    initEcharts(yData) {
      // 基本柱状图
      const option = {
        xAxis: {
          data: this.xData,
          axisLabel: {
            padding: [4, 0, 0, 0],
            fontSize: 20,
            color: '#000',
          },
        },
        yAxis: {},
        series: [
          {
            type: "bar", //形状为柱状图
            data: yData,
            label: {
              // 柱状图上方文本标签，默认展示数值信息
              show: true,
              position: "top",
              fontSize: 30,
              color: "#000",
            },
            itemStyle: {
              color: "#91cc75",
              borderType: "dashed",
            }
          }
        ]
      };
      const myChart = echarts.init(document.getElementById("myChart"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  }
}

</script>

<style scoped>

</style>
